const { render } = ReactDOM
const {
  BrowserRouter, 
  Route, 
  Link, 
  Switch,
  Redirect
} = ReactRouterDOM

const Links = () => (
  <nav>
    <Link to="/">Home</Link>
    <Link to="/old/123">Old</Link>
    <Link to="/new/456">New</Link>
    <Link to="/redirect/789">Redirect</Link>
    <Link to="/protected">Login</Link>
  </nav>
)

const logined = true;

const App = () => (
  <BrowserRouter>
    <div>
      
      <Links />
      
      <Route exact path="/" render={() => <h1>Home</h1>} />
      
      <Route
        path="/protected"
        render={() => (
          logined 
          ? <h1>欢迎来到登录页面</h1>
          : <Redirect to="/new/login" />
        )} 
      />
      
       {/* 适用于需要传参的重定向需求*/}
      <Route 
        path="/redirect/:str" 
        render={({match}) => (
          <Redirect push to={`/new/${match.params.str}`} />
        )}
      />
      <Route path="/new/login" render={() => <h1>测试Redirect赛所所所</h1>} />
            

      {/* 需要被重定向的路径，可以结合 Switch ，这是适用于不需要传参的重定向需求*/}
      <Switch>
        <Route 
          path="/new/:str" 
          render={({match}) => <h1>New:{match.params.str}</h1>} />
        <Redirect from="/old/:str" to="/new/123" />
      </Switch>
    </div>
  </BrowserRouter>
)


render(<App/>, document.getElementById('root'))